<!doctype html>



  


<html class="theme-next mist use-motion" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>



<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />












  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />




  
  
  
  

  
    
    
  

  

  

  

  

  
    
    
    <link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.1.0" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="markdown," />








  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.1.0" />






<meta name="description" content="markdown的语法简单，效果美观，而且通用性不差，网上已经有很多教程了，这里记录一些基本的语法，和一些复杂的方法以做备忘录。 概述Markdown 的目标是实现「易读易写」。Markdown 语法的目标是：成为一种适用于网络的书写语言。Markdown 不是想要取代 HTML，甚至也没有要和它相近，它的语法种类很少，只对应 HTML 标记的一小部分。Markdown 的构想不是要使得 HTML">
<meta name="keywords" content="markdown">
<meta property="og:type" content="article">
<meta property="og:title" content="markdown语法">
<meta property="og:url" content="http://lanbos.win/2015/10/02/tools/markdown_base/index.html">
<meta property="og:site_name" content="lanbos&#39;blog">
<meta property="og:description" content="markdown的语法简单，效果美观，而且通用性不差，网上已经有很多教程了，这里记录一些基本的语法，和一些复杂的方法以做备忘录。 概述Markdown 的目标是实现「易读易写」。Markdown 语法的目标是：成为一种适用于网络的书写语言。Markdown 不是想要取代 HTML，甚至也没有要和它相近，它的语法种类很少，只对应 HTML 标记的一小部分。Markdown 的构想不是要使得 HTML">
<meta property="og:locale" content="zh-Hans">
<meta property="og:updated_time" content="2016-12-30T10:02:58.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="markdown语法">
<meta name="twitter:description" content="markdown的语法简单，效果美观，而且通用性不差，网上已经有很多教程了，这里记录一些基本的语法，和一些复杂的方法以做备忘录。 概述Markdown 的目标是实现「易读易写」。Markdown 语法的目标是：成为一种适用于网络的书写语言。Markdown 不是想要取代 HTML，甚至也没有要和它相近，它的语法种类很少，只对应 HTML 标记的一小部分。Markdown 的构想不是要使得 HTML">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Mist',
    sidebar: {"position":"left","display":"post"},
    fancybox: true,
    motion: true,
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://lanbos.win/2015/10/02/tools/markdown_base/"/>





  <title> markdown语法 | lanbos'blog </title>
</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  










  
  
    
  

  <div class="container one-collumn sidebar-position-left page-post-detail ">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-meta ">
  

  <div class="custom-logo-site-title">
    <a href="/"  class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <span class="site-title">lanbos'blog</span>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>
  <p class="site-subtitle">这个人假装很懒，什么都没有留下</p>
</div>

<div class="site-nav-toggle">
  <button>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
  </button>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br />
            
            关于
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
  <link itemprop="mainEntityOfPage" href="http://lanbos.win/2015/10/02/tools/markdown_base/">

  <span style="display:none" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <meta itemprop="name" content="lanbos">
    <meta itemprop="description" content="">
    <meta itemprop="image" content="https://ws1.sinaimg.cn/large/5c9d16d6gw1fbesf3zrhej209p09ftai.jpg">
  </span>

  <span style="display:none" itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
    <meta itemprop="name" content="lanbos'blog">
    <span style="display:none" itemprop="logo" itemscope itemtype="http://schema.org/ImageObject">
      <img style="display:none;" itemprop="url image" alt="lanbos'blog" src="">
    </span>
  </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                markdown语法
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2015-10-02T08:55:29+08:00">
                2015-10-02
              </time>
            

            

            
          </span>

          
            <span class="post-category" >
              <span class="post-meta-divider">|</span>
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/常用工具/" itemprop="url" rel="index">
                    <span itemprop="name">常用工具</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          

          
          

          

          

        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        <p>markdown的语法简单，效果美观，而且通用性不差，网上已经有很多教程了，这里记录一些基本的语法，和一些复杂的方法以做备忘录。</p>
<h2 id="概述"><a href="#概述" class="headerlink" title="概述"></a>概述</h2><p>Markdown 的目标是实现「易读易写」。Markdown 语法的目标是：成为一种适用于网络的书写语言。<br>Markdown 不是想要取代 HTML，甚至也没有要和它相近，它的语法种类很少，只对应 HTML 标记的一小部分。Markdown 的构想不是要使得 HTML 文档更容易书写。在我看来， HTML 已经很容易写了。Markdown 的理念是，能让文档更容易读、写和随意改。HTML 是一种发布的格式，Markdown 是一种书写的格式。就这样，Markdown 的格式语法只涵盖纯文本可以涵盖的范围。</p>
<p>不在 Markdown 涵盖范围之内的标签，都可以直接在文档里面用 HTML 撰写。不需要额外标注这是 HTML 或是 Markdown；只要直接加标签就可以了。</p>
<p>要制约的只有一些 HTML 区块元素――比如 &lt;div&gt;、&lt;table&gt;、 &lt;pre&gt;、 &lt;p&gt; 等标签，必须在前后加上空行与其它内容区隔开，还要求它们的开始标签与结尾标签不能用制表符或空格来缩进。Markdown 的生成器有足够智能，不会在 HTML 区块标签外加上不必要的  &lt;p&gt; 标签。<br>请注意，在 HTML 区块标签间的 Markdown 格式语法将不会被处理。比如，你在 HTML 区块内使用 Markdown 样式的<em>强调</em>会没有效果。<br><a id="more"></a><br>HTML 的区段（行内）标签如  &lt;span&gt;、 &lt;cite&gt;、 &lt;del&gt; 可以在 Markdown 的段落、列表或是标题里随意使用。依照个人习惯，甚至可以不用 Markdown 格式，而直接采用 HTML 标签来格式化。举例说明：如果比较喜欢 HTML 的  &lt;a&gt; 或  &lt;img&gt; 标签，可以直接使用这些标签，而不用 Markdown 提供的链接或是图像标签语法。</p>
<p>和处在 HTML 区块标签间不同，Markdown 语法在 HTML 区段标签间是有效的。</p>
<p>在 HTML 文件中，有两个字符需要特殊处理：  &lt;和 &amp; 。  &lt;符号用于起始标签，&amp; 符号则用于标记 HTML 实体，如果你只是想要显示这些字符的原型，你必须要使用实体的形式，像是 &amp;lt; 和 &amp;amp;。</p>
<p>&amp; 字符尤其让网络文档编写者受折磨，如果你要打「AT&amp;T」 ，你必须要写成「AT&amp;amp;T」。而网址中的 &amp; 字符也要转换。</p>
<h2 id="常用标签"><a href="#常用标签" class="headerlink" title="常用标签"></a>常用标签</h2><h3 id="1-标题"><a href="#1-标题" class="headerlink" title="1.标题"></a>1.标题</h3><p>标题是最为常用的格式，而在 Markdown 中，你只需要在文本前面加上 # 即可，同理、你还可以增加二级标题、三级标题、四级标题、五级标题和六级标题，总共六级，只需要增加 # 即可，标题字号相应降低。例如：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"># 一级标题 </div><div class="line">## 二级标题 </div><div class="line">### 三级标题 </div><div class="line">#### 四级标题 </div><div class="line">##### 五级标题 </div><div class="line">###### 六级标题</div></pre></td></tr></table></figure></p>
<p><em>注：# 和「一级标题」之间强烈建议保留一个字符的空格，这是最标准的 Markdown 写法。</em></p>
<h3 id="2-列表"><a href="#2-列表" class="headerlink" title="2.列表"></a>2.列表</h3><p>列表格式也很常用，在 Markdown 中，你只需要在文字前面加上 - 就可以了，例如：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">- 文本1</div><div class="line">- 文本2</div><div class="line">- 文本3</div></pre></td></tr></table></figure></p>
<p>如果你希望有序列表，<br>也可以在文字前面加上 <em>1. 2. 3. </em>就可以了，例如：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">1. 文本1</div><div class="line">2. 文本2</div><div class="line">3. 文本3</div></pre></td></tr></table></figure></p>
<p><em>注：-、1.和文本之间要保留一个字符的空格。</em></p>
<h3 id="3-代码引用"><a href="#3-代码引用" class="headerlink" title="3.代码引用"></a>3.代码引用</h3><p>需要引用代码时，如果引用的语句只有一段，不分行，可以用 ` 将语句包起来。<br>如果引用的语句为多行，可以将```置于这段代码的首行和末行。</p>
<h3 id="4-普通引用"><a href="#4-普通引用" class="headerlink" title="4.普通引用"></a>4.普通引用</h3><p>在我们写作的时候经常需要引用他人的文字，这个时候引用这个格式就很有必要了，在 Markdown 中，你只需要在你希望引用的文字前面加上 &gt; 就好了。<em>注：&gt; 和文本之间要保留一个字符的空格。</em></p>
<h3 id="5-链接和图片"><a href="#5-链接和图片" class="headerlink" title="5.链接和图片"></a>5.链接和图片</h3><p>在 Markdown 中，插入链接不需要其他按钮，你只需要使用 <code>[显示文本](链接地址)</code>这样的语法即可，例如：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">[简书](http://www.jianshu.com)</div></pre></td></tr></table></figure></p>
<p>在 Markdown 中，插入图片不需要其他按钮，你只需要使用 <code>![](图片链接地址)</code> 这样的语法即可，例如：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">![](http://ww4.sinaimg.cn/bmiddle/aa397b7fjw1dzplsgpdw5j.jpg)</div></pre></td></tr></table></figure></p>
<p><em>注：插入图片的语法和链接的语法很像，只是前面多了一个 ！。</em></p>
<h2 id="高级用法"><a href="#高级用法" class="headerlink" title="高级用法"></a>高级用法</h2><h3 id="1-表格"><a href="#1-表格" class="headerlink" title="1.表格"></a>1.表格</h3><p>markdown的表格还是不太好用的，虽然也算比较直观。<br><figure class="highlight md"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">| Tables        | Are           | Cool  |</div><div class="line">| ------------- |:-------------:| -----:|</div><div class="line">| col 3 is      | right-aligned | $1600 |</div><div class="line">| col 2 is      | centered      |   $12 |</div><div class="line">| zebra stripes | are neat      |    $1 |</div></pre></td></tr></table></figure></p>
<table>
<thead>
<tr>
<th>Tables</th>
<th style="text-align:center">Are</th>
<th style="text-align:right">Cool</th>
</tr>
</thead>
<tbody>
<tr>
<td>col 3 is</td>
<td style="text-align:center">right-aligned</td>
<td style="text-align:right">$1600</td>
</tr>
<tr>
<td>col 2 is</td>
<td style="text-align:center">centered</td>
<td style="text-align:right">$12</td>
</tr>
<tr>
<td>zebra stripes</td>
<td style="text-align:center">are neat</td>
<td style="text-align:right">$1</td>
</tr>
</tbody>
</table>
<p><code>:</code>表示居中方式。</p>
<h3 id="2-自动链接"><a href="#2-自动链接" class="headerlink" title="2.自动链接"></a>2.自动链接</h3><p>Markdown 支持以比较简短的自动链接形式来处理网址和电子邮件信箱，只要是用尖括号包起来， Markdown 就会自动把它转成链接。一般网址的链接文字就和链接地址一样，例如：<br><figure class="highlight md"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="xml"><span class="tag">&lt;<span class="name">http:</span>//<span class="attr">example.com</span>/&gt;</span></span></div></pre></td></tr></table></figure></p>
<p>显示为：<a href="http://example.com/" target="_blank" rel="external">http://example.com/</a></p>
<h3 id="3-删除线"><a href="#3-删除线" class="headerlink" title="3.删除线"></a>3.删除线</h3><p>使用 ~~ 表示删除线。<br><figure class="highlight md"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">~~这是一段错误的文本。~~</div></pre></td></tr></table></figure></p>
<p>显示为：<del>这是一段错误的文本。</del></p>
<h3 id="4-todo列表"><a href="#4-todo列表" class="headerlink" title="4.todo列表"></a>4.todo列表</h3><p>使用带有 [ ] 或 [x] （未完成或已完成）项的列表语法撰写一个待办事宜列表，并且支持子列表嵌套以及混用Markdown语法，例如：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">- [ ] **七月旅行准备**</div><div class="line">    - [ ] 准备邮轮上需要携带的物品</div><div class="line">    - [ ] 浏览日本免税店的物品</div><div class="line">    - [x] 购买蓝宝石公主号七月一日的船票</div></pre></td></tr></table></figure></p>
<p>显示为：</p>
<ul>
<li>[ ] <strong>七月旅行准备</strong><ul>
<li>[ ] 准备邮轮上需要携带的物品</li>
<li>[ ] 浏览日本免税店的物品</li>
<li>[x] 购买蓝宝石公主号七月一日的船票</li>
</ul>
</li>
</ul>
<h3 id="5-水平分隔线"><a href="#5-水平分隔线" class="headerlink" title="5.水平分隔线"></a>5.水平分隔线</h3><p>用<code>***</code>表示水平分隔线<br>显示如：</p>
<hr>
<h3 id="6-注脚（支持性不友好）"><a href="#6-注脚（支持性不友好）" class="headerlink" title="6.注脚（支持性不友好）"></a>6.注脚（支持性不友好）</h3><p>使用 [^keyword] 表示注脚。</p>
<p>这是一个注脚[^footnote]的样例。</p>
<p>这是第二个注脚[^footnote2]的样例。</p>
<h2 id="代码速查"><a href="#代码速查" class="headerlink" title="代码速查"></a>代码速查</h2><figure class="highlight md"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div></pre></td><td class="code"><pre><div class="line">1 标题与文字格式</div><div class="line">标题</div><div class="line"></div><div class="line"><span class="section"># 这是 H1 &lt;一级标题&gt;</span></div><div class="line"><span class="section">## 这是 H2 &lt;二级标题&gt;</span></div><div class="line"><span class="section">###### 这是 H6 &lt;六级标题&gt;</span></div><div class="line"></div><div class="line">文字格式</div><div class="line"></div><div class="line"><span class="strong">**这是文字粗体格式**</span></div><div class="line"><span class="emphasis">*这是文字斜体格式*</span></div><div class="line">~~在文字上添加删除线~~</div><div class="line"></div><div class="line">2 列表</div><div class="line">无序列表</div><div class="line"></div><div class="line"><span class="bullet">* </span>项目1</div><div class="line"><span class="bullet">* </span>项目2</div><div class="line"><span class="bullet">* </span>项目3</div><div class="line"></div><div class="line">有序列表</div><div class="line"></div><div class="line"><span class="bullet">1. </span>项目1</div><div class="line"><span class="bullet">2. </span>项目2</div><div class="line"><span class="bullet">3. </span>项目3</div><div class="line">   * 项目1</div><div class="line">   * 项目2</div><div class="line"></div><div class="line">3 其它</div><div class="line">图片</div><div class="line"></div><div class="line">![<span class="string">图片名称</span>](<span class="link">http://gitcafe.com/image.png</span>)</div><div class="line"></div><div class="line">链接</div><div class="line"></div><div class="line">[<span class="string">链接名称</span>](<span class="link">http://gitcafe.com</span>)</div><div class="line"></div><div class="line">引用</div><div class="line"></div><div class="line"><span class="quote">&gt; 第一行引用文字</span></div><div class="line"><span class="quote">&gt; 第二行引用文字</span></div><div class="line"></div><div class="line">水平线</div><div class="line"></div><div class="line"><span class="emphasis">***</span></div><div class="line"></div><div class="line">代码</div><div class="line"></div><div class="line"><span class="code">`&lt;hello world&gt;`</span></div><div class="line"></div><div class="line">代码块高亮</div><div class="line"></div><div class="line">\<span class="code">`\`</span>\`ruby</div><div class="line">  def add(a, b)</div><div class="line"><span class="code">    return a + b</span></div><div class="line">  end</div><div class="line">\<span class="code">`\`</span>\`</div><div class="line"></div><div class="line">表格</div><div class="line"></div><div class="line">  表头  | 表头</div><div class="line">  ------------- | -------------</div><div class="line"> 单元格内容  | 单元格内容</div><div class="line"> 单元格内容l  | 单元格内容</div></pre></td></tr></table></figure>
<h2 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h2><p><a href="http://xiajian.github.io/rhg-zh/zh/markdown/" target="_blank" rel="external">Ruby Hacking Guide 中文版-Markdown语法小结</a></p>
<p><a href="http://www.jianshu.com/p/q81RER" target="_blank" rel="external">献给写作者的 Markdown 新手指南</a></p>
<p><a href="http://wowubuntu.com/markdown/" target="_blank" rel="external">Markdown 语法说明 (简体中文版)</a></p>

      
    </div>

    <div>
      
        

      
    </div>

    <div>
      
        

      
    </div>


    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/markdown/" rel="tag"># markdown</a>
          
        </div>
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2015/03/10/python/mysql_base01/" rel="next" title="mysql初始安装的一些问题">
                <i class="fa fa-chevron-left"></i> mysql初始安装的一些问题
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2015/10/10/python/django_base01/" rel="prev" title="django 初学(一)">
                django 初学(一) <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          
  <div class="comments" id="comments">
    
  </div>
  <!-- UY BEGIN -->
<div id="uyan_frame"></div>
<script type="text/javascript" src="http://v2.uyan.cc/code/uyan.js?uid=2123221"></script>
<!-- UY END -->



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="https://ws1.sinaimg.cn/large/5c9d16d6gw1fbesf3zrhej209p09ftai.jpg"
               alt="lanbos" />
          <p class="site-author-name" itemprop="name">lanbos</p>
          <p class="site-description motion-element" itemprop="description">这个人假装很懒，什么都没有留下</p>
        </div>
        <nav class="site-state motion-element">
          <div class="site-state-item site-state-posts">
            <a href="/archives">
              <span class="site-state-item-count">24</span>
              <span class="site-state-item-name">日志</span>
            </a>
          </div>

          
            <div class="site-state-item site-state-categories">
              
                <span class="site-state-item-count">5</span>
                <span class="site-state-item-name">分类</span>
              
            </div>
          

          
            <div class="site-state-item site-state-tags">
              <a href="/tags">
                <span class="site-state-item-count">16</span>
                <span class="site-state-item-name">标签</span>
              </a>
            </div>
          

        </nav>

        

        <div class="links-of-author motion-element">
          
        </div>

        
        

        
        

        


      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#概述"><span class="nav-number">1.</span> <span class="nav-text">概述</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#常用标签"><span class="nav-number">2.</span> <span class="nav-text">常用标签</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-标题"><span class="nav-number">2.1.</span> <span class="nav-text">1.标题</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-列表"><span class="nav-number">2.2.</span> <span class="nav-text">2.列表</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-代码引用"><span class="nav-number">2.3.</span> <span class="nav-text">3.代码引用</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4-普通引用"><span class="nav-number">2.4.</span> <span class="nav-text">4.普通引用</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#5-链接和图片"><span class="nav-number">2.5.</span> <span class="nav-text">5.链接和图片</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#高级用法"><span class="nav-number">3.</span> <span class="nav-text">高级用法</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-表格"><span class="nav-number">3.1.</span> <span class="nav-text">1.表格</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-自动链接"><span class="nav-number">3.2.</span> <span class="nav-text">2.自动链接</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-删除线"><span class="nav-number">3.3.</span> <span class="nav-text">3.删除线</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4-todo列表"><span class="nav-number">3.4.</span> <span class="nav-text">4.todo列表</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#5-水平分隔线"><span class="nav-number">3.5.</span> <span class="nav-text">5.水平分隔线</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#6-注脚（支持性不友好）"><span class="nav-number">3.6.</span> <span class="nav-text">6.注脚（支持性不友好）</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#代码速查"><span class="nav-number">4.</span> <span class="nav-text">代码速查</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#参考"><span class="nav-number">5.</span> <span class="nav-text">参考</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy; 
  <span itemprop="copyrightYear">2017</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">lanbos</span>
</div>


<div class="powered-by">
  由 <a class="theme-link" href="https://hexo.io">Hexo</a> 强力驱动
</div>

<div class="theme-info">
  主题 -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT.Mist
  </a>
</div>


        

        
      </div>
    </footer>

    <div class="back-to-top">
      <i class="fa fa-arrow-up"></i>
    </div>
  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  



  
  <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>

  
  <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>

  
  <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.0"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.0"></script>



  
  

  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.0"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.0"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.0"></script>



  



  




	




  
  

  

  

  

  


</body>
</html>
